<template>
    <div class="article-edit">
        <el-card class="!border-none" shadow="never">
            <el-page-header :content="$route.meta.title" @back="$router.back()" />
        </el-card>
        <el-card class="mt-4 !border-none" shadow="never">
            <el-form class="ls-form" label-width="100px"  ref="formRef" :model="formData">
                <div class="xl:flex flex-row" style="flex-wrap: wrap;">
                    <template v-for="(item, index) in columnArr" :key="index">
                        <el-form-item :label="item.name" :prop="item.column_name">
                            <div class="w-80">
                                <div v-if="item.type == 'input'">
                                    {{ formData[item.column_name] }}
                                    <!-- <el-input v-model="formData[item.column_name]" :placeholder="'请输入' + item.name"
                                        type="data" show-word-limit clearable style="width: 100%;height: 40px;" /> -->
                                </div>
                                <div v-else-if="item.type == 'checkbox'">
                                    {{ formData[item.column_name] == 1 ? '是' : '否' }}
                                </div>
                            </div>
                        </el-form-item>
                    </template>
                    <template v-for="(item, index) in limits" :key="index">
                        <el-form-item :label="item.name" :prop="item.column_name" v-perms="[item.limit]">
                            <div class="w-80">
                                <div v-if="item.type == 'input'">
                                    {{ formData[item.column_name] }}
                                </div>
                                <div v-else-if="item.type == 'checkbox'">
                                    {{ formData[item.column_name] == 1 ? '是' : '否' }}
                                </div>
                            </div>
                        </el-form-item>
                    </template>
                </div>
                <el-form-item label="下单商品">
                    <template #default="{ row }">

                        <!-- Element Plus 表格 -->
                        <el-table :data="formData.skus" style="width: auto" border show-summary
                        :summary-method="getSummaries">
                            <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
                            <el-table-column label="商品编码/名称" width="300" align="center">
                                <template #default="{ row }">
                                    {{ `${row.sku_code?row.sku_code + '-':''}` }} {{ row.goods_name }}
                                </template>
                            </el-table-column>


                            <el-table-column prop="unit" label="单位" width="80" align="center"></el-table-column>

                            <el-table-column prop="name" label="规格" width="150" align="center"></el-table-column>
                            <el-table-column prop="color" label="颜色" width="150" align="center"></el-table-column>
                            <el-table-column prop="type" label="型号" width="150" align="center"></el-table-column>
                            <el-table-column prop="hat_color" label="盖帽颜色" width="150" align="center"></el-table-column>
                            <el-table-column prop="caliber" label="接口口径" width="150" align="center"></el-table-column>
                            <el-table-column prop="series" label="系列" width="150" align="center"></el-table-column>
                            <el-table-column prop="method" label="进水方式" width="150" align="center"></el-table-column>
                            <el-table-column prop="special_type" label="特殊型号" width="150" align="center"></el-table-column>
                            <el-table-column prop="height" label="高度" width="150" align="center"></el-table-column>
                            <el-table-column prop="number" label="片数" width="150" align="center"></el-table-column>
                            <el-table-column prop="group_number" label="组数" width="150" align="center"></el-table-column>
                            <el-table-column prop="total_number" label="订购数量" width="150" align="center"></el-table-column>
                            <el-table-column prop="sale_price" label="销售单价" width="150" align="center"></el-table-column>
                            <el-table-column prop="cost_price" label="成本单价" width="150" align="center"></el-table-column>
                            

                            <el-table-column label="订购金额 (元)" width="120" align="right" prop="total_price">
                                <template #default="{ row }">
                                    {{ row.sale_price * row.total_number }}
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </el-form-item>
                <el-form-item label="资料上传">
                    <template #default>
                        <div style="width: 100%;display: flex;">
                            <el-image v-for="(item, index) in formData.info_photos" :key="item" :src="item" style="width: 100px;height: 100px;margin-right: 10px;" :preview-src-list="formData.info_photos" :initial-index="index" fit="contain"/>
                        </div>
                    </template>
                </el-form-item>
                <el-divider />
                <!-- 测量 -->
                <!-- <div class="xl:flex flex-row" style="flex-wrap: wrap;" v-if="formData.is_measure == 1">
                    <template v-for="(item, index) in measureCo" :key="index">
                        <el-form-item :label="item.name" :prop="item.column_name" style="display: flex;align-items: flex-start;">
                            <div class="w-80">
                                <div v-if="item.type == 'upload'">
                                    <el-image v-for="itemImg in formData[item.column_name]" :key="itemImg" :src="itemImg" style="width: 100px;height: 100px;margin-right: 10px;" :preview-src-list="[itemImg]"/>
                                </div>
                                <div v-else-if="item.type == 'date'">
                                    {{ formData[item.column_name] ? timeFormat(formData[item.column_name] * 1000) : '' }}
                                </div>
                                <div v-else>
                                    {{ formData[item.column_name] }}
                                </div>
                            </div>
                        </el-form-item>
                    </template>
                </div> -->
                <!-- 测量列表 -->
                <div  class="xl:flex flex-row" style="flex-wrap: wrap;" v-if="formData.is_measure == 1">
                    <template v-for="(item, index) in measureCoForm.list" :key="index">
                        <el-form :model="item" label-width="80px">
                            <div  class="xl:flex flex-row" style="flex-wrap: wrap;">
                                <el-form-item label="测量时间" :prop="item.measure_time" style="display: flex;align-items: flex-start;">
                                    <div class="w-[200px]">
                                        {{ item.measure_time ? timeFormat(Number(item.measure_time) * 1000) : '' }}
                                    </div>
                                </el-form-item>
                                <el-form-item label="测量师傅" :prop="item.measure_name" style="display: flex;align-items: flex-start;">
                                    <div class="w-[200px]">
                                        {{ item.measure_name }}
                                    </div>
                                </el-form-item>
                                <el-form-item label="师傅电话" :prop="item.measure_mobile" style="display: flex;align-items: flex-start;">
                                    <div class="w-[200px]">
                                        {{ item.measure_mobile }}
                                    </div>
                                </el-form-item>
                                <el-form-item label="测量照片" style="display: flex;align-items: flex-start;">
                                    <div class="w-60">
                                        <el-image v-for="(itemImg, index) in item.measure_photos" :key="itemImg" :src="itemImg" style="width: 100px;height: 100px;margin-right: 10px;" :preview-src-list="item.measure_photos" :initial-index="index" fit="contain"/>
                                    </div>
                                </el-form-item>
                            </div>
                        </el-form>
                    </template>
                </div>
                <!-- 交底 -->
                <div class="xl:flex flex-row" style="flex-wrap: wrap;" v-if="formData.is_disclose == 1">
                    <template v-for="(item, index) in discloseCo" :key="index">
                        <el-form-item :label="item.name" :prop="item.column_name" :label-width="80" style="display: flex;align-items: flex-start;">
                            <div>
                                <div v-if="item.type == 'upload'" class="w-60">
                                    <el-image v-for="(itemImg, index) in formData[item.column_name]" :key="itemImg" :src="itemImg" style="width: 100px;height: 100px;margin-right: 10px;" :preview-src-list="formData[item.column_name]" :initial-index="index" fit="contain"/>
                                </div>
                                <div v-else-if="item.type == 'date'" class="w-[200px]">
                                    {{ formData[item.column_name] ? timeFormat(formData[item.column_name] * 1000) : '' }}
                                </div>
                                <div v-else class="w-[200px]">
                                    {{ formData[item.column_name] }}
                                </div>
                            </div>
                        </el-form-item>
                    </template>
                </div>
                <!-- 支付 -->
                <div class="xl:flex flex-row" style="flex-wrap: wrap;" v-if="formData.is_pay == 1">
                    <template v-for="(item, index) in payCo" :key="index">
                        <el-form-item :label="item.name" :prop="item.column_name" :label-width="80" style="display: flex;align-items: flex-start;">
                            <div>
                                <div v-if="item.type == 'upload'" class="w-60">
                                    <el-image v-for="(itemImg, index) in formData[item.column_name]" :key="itemImg" :src="itemImg" style="width: 100px;height: 100px;margin-right: 10px;" :preview-src-list="formData[item.column_name]" :initial-index="index" fit="contain"/>
                                </div>
                                <div v-else-if="item.type == 'date'" class="w-[200px]">
                                    {{ formData[item.column_name] ? timeFormat(formData[item.column_name] * 1000) : '' }}
                                </div>
                                <div v-else class="w-[200px]">
                                    {{ formData[item.column_name] }}
                                </div>
                            </div>
                        </el-form-item>
                    </template>
                </div>
                <!-- 改管 -->
                <!-- <div class="xl:flex flex-row" style="flex-wrap: wrap;" v-if="formData.is_change == 1">
                    <template v-for="(item, index) in changeCo" :key="index">
                        <el-form-item :label="item.name" :prop="item.column_name"  style="display: flex;align-items: flex-start;">
                            <div class="w-80">
                                <div v-if="item.type == 'upload'">
                                    <el-image v-for="itemImg in formData[item.column_name]" :key="itemImg" :src="itemImg" style="width: 100px;height: 100px;margin-right: 10px;" :preview-src-list="[itemImg]"/>
                                </div>
                                <div v-else-if="item.type == 'date'">
                                    {{ formData[item.column_name] ? timeFormat(formData[item.column_name] * 1000) : '' }}
                                </div>
                                <div v-else>
                                    {{ formData[item.column_name] }}
                                </div>
                            </div>
                        </el-form-item>
                    </template>
                </div> -->
                <!-- 改管列表 -->
                <div class="xl:flex flex-row" style="flex-wrap: wrap;" v-if="formData.is_change == 1">
                    <template v-for="(item, index) in changeCoForm.list" :key="index">
                        <el-form :model="item" label-width="80px">
                            <div  class="xl:flex flex-row" style="flex-wrap: wrap;">
                                <el-form-item label="改管时间" :prop="item.change_time" style="display: flex;align-items: flex-start;">
                                    <div class="w-[200px]">
                                        {{ item.change_time ? timeFormat(Number(item.change_time) * 1000) : '' }}
                                    </div>
                                </el-form-item>
                                <el-form-item label="改管师傅" :prop="item.change_name" style="display: flex;align-items: flex-start;">
                                    <div class="w-[200px]">
                                        {{ item.change_name }}
                                    </div>
                                </el-form-item>
                                <el-form-item label="师傅电话" :prop="item.change_mobile" style="display: flex;align-items: flex-start;">
                                    <div class="w-[200px]">
                                        {{ item.change_mobile }}
                                    </div>
                                </el-form-item>
                                <el-form-item label="改管照片" style="display: flex;align-items: flex-start;">
                                    <div class="w-60">
                                        <el-image v-for="(itemImg, index) in item.change_photos" :key="itemImg" :src="itemImg" style="width: 100px;height: 100px;margin-right: 10px;" :preview-src-list="item.change_photos" :initial-index="index" fit="contain"/>
                                    </div>
                                </el-form-item>
                            </div>
                        </el-form>
                    </template>
                </div>
                <!-- 下单 -->
                <!-- <div class="xl:flex flex-row" style="flex-wrap: wrap;" v-if="formData.is_order == 1">
                    <template v-for="(item, index) in orderCo" :key="index">
                        <el-form-item :label="item.name" :prop="item.column_name"  style="display: flex;align-items: flex-start;">
                            <div class="w-80">
                                <div v-if="item.type == 'upload'">
                                    <el-image v-for="itemImg in formData[item.column_name]" :key="itemImg" :src="itemImg" style="width: 100px;height: 100px;margin-right: 10px;" :preview-src-list="[itemImg]"/>
                                </div>
                                <div v-else-if="item.type == 'date'">
                                    {{ formData[item.column_name] ? timeFormat(formData[item.column_name] * 1000) : '' }}
                                </div>
                                <div v-else>
                                    {{ formData[item.column_name] }}
                                </div>
                            </div>
                        </el-form-item>
                    </template>
                </div> -->
                <div class="xl:flex flex-row" style="flex-wrap: wrap;" v-if="formData.is_order == 1">
                    <template v-for="(item, index) in orderCoForm.list" :key="index">
                        <el-form :model="item" label-width="80px">
                            <div  class="xl:flex flex-row" style="flex-wrap: wrap;">
                                <el-form-item label="下单时间" :prop="item.order_time" style="display: flex;align-items: flex-start;">
                                    <div class="w-[200px]">
                                        {{ item.order_time ? timeFormat(Number(item.order_time) * 1000) : '' }}
                                    </div>
                                </el-form-item>
                                <el-form-item label="下单师傅" :prop="item.order_name" style="display: flex;align-items: flex-start;">
                                    <div class="w-[200px]">
                                        {{ item.order_name }}
                                    </div>
                                </el-form-item>
                                <el-form-item label="师傅电话" :prop="item.order_mobile" style="display: flex;align-items: flex-start;">
                                    <div class="w-[200px]">
                                        {{ item.order_mobile }}
                                    </div>
                                </el-form-item>
                                <el-form-item label="下单照片" style="display: flex;align-items: flex-start;">
                                    <div class="w-60">
                                        <el-image v-for="(itemImg, index) in item.order_photos" :key="itemImg" :src="itemImg" style="width: 100px;height: 100px;margin-right: 10px;" :preview-src-list="item.order_photos" :initial-index="index" fit="contain"/>
                                    </div>
                                </el-form-item>
                            </div>
                        </el-form>
                    </template>
                </div>
                <!-- 发货 -->
                <div class="xl:flex flex-row" style="flex-wrap: wrap;" v-if="formData.is_send == 1" v-perms="['order.consignment']">
                    <template v-for="(item, index) in sendCo" :key="index">
                        <el-form-item :label="item.name" :prop="item.column_name" :label-width="80" style="display: flex;align-items: flex-start;">
                            <div class="w-[200px]">
                                <div>
                                    {{ formData[item.column_name] ? timeFormat(formData[item.column_name] * 1000) : '' }}
                                </div>
                            </div>
                        </el-form-item>
                    </template>
                </div>
                <!-- 安装 -->
                <!-- <div class="xl:flex flex-row" style="flex-wrap: wrap;" v-if="formData.is_install == 1">
                    <template v-for="(item, index) in installCo" :key="index">
                        <el-form-item :label="item.name" :prop="item.column_name"  style="display: flex;align-items: flex-start;">
                            <div class="w-80">
                                <div v-if="item.type == 'upload'">
                                    <el-image v-for="itemImg in formData[item.column_name]" :key="itemImg" :src="itemImg" style="width: 100px;height: 100px;margin-right: 10px;" :preview-src-list="[itemImg]"/>
                                </div>
                                <div v-else-if="item.type == 'date'">
                                    {{ formData[item.column_name] ? timeFormat(formData[item.column_name] * 1000) : '' }}
                                </div>
                                <div v-else>
                                    {{ formData[item.column_name] }}
                                </div>
                            </div>
                        </el-form-item>
                    </template>
                </div> -->
                <div class="xl:flex flex-row" style="flex-wrap: wrap;" v-if="formData.is_install == 1">
                    <template v-for="(item, index) in installCoForm.list" :key="index">
                        <el-form :model="item" label-width="80px">
                            <div  class="xl:flex flex-row" style="flex-wrap: wrap;">
                                <el-form-item label="安装时间" :prop="item.install_time" style="display: flex;align-items: flex-start;">
                                    <div class="w-[200px]">
                                        {{ item.install_time ? timeFormat(Number(item.install_time) * 1000) : '' }}
                                    </div>
                                </el-form-item>
                                <el-form-item label="安装师傅" :prop="item.install_name" style="display: flex;align-items: flex-start;">
                                    <div class="w-[200px]">
                                        {{ item.install_name }}
                                    </div>
                                </el-form-item>
                                <el-form-item label="师傅电话" :prop="item.install_mobile" style="display: flex;align-items: flex-start;">
                                    <div class="w-[200px]">
                                        {{ item.install_mobile }}
                                    </div>
                                </el-form-item>
                                <el-form-item label="安装照片" style="display: flex;align-items: flex-start;">
                                    <div class="w-60">
                                        <el-image v-for="(itemImg, index) in item.install_photos" :key="itemImg" :src="itemImg" style="width: 100px;height: 100px;margin-right: 10px;" :preview-src-list="item.install_photos" :initial-index="index" fit="contain"/>
                                    </div>
                                </el-form-item>
                            </div>
                        </el-form>
                    </template>
                </div>
                <!-- 收货 -->
                <div class="xl:flex flex-row" style="flex-wrap: wrap;" v-if="formData.is_receive == 1" v-perms="['order.receiving']">
                    <template v-for="(item, index) in receiveCo" :key="index">
                        <el-form-item :label="item.name" :prop="item.column_name" :label-width="80" style="display: flex;align-items: flex-start;">
                            <div class="w-[200px]">
                                <div>
                                    {{ formData[item.column_name] ? timeFormat(formData[item.column_name] * 1000) : '' }}
                                </div>
                                
                            </div>
                        </el-form-item>
                    </template>
                </div>
                <!-- <el-form-item label="订单状态">
                    <el-select v-model="formData.status" placeholder="请选择订单状态" style="width: 100%;height: 40px;">
                        <el-option label="待处理" value="pending" />
                        <el-option label="处理中" value="processing" />
                        <el-option label="已完成" value="completed" />
                        <el-option label="已取消" value="cancelled" />
                    </el-select>
                </el-form-item> -->
            </el-form>
        </el-card>
        <footer-btns>
            <el-button type="primary" @click="$router.back()">关闭</el-button>
        </footer-btns>
    </div>
</template>

<script lang="ts" setup name="articleListsEdit">
import type { FormInstance } from 'element-plus'

import {orderDetail } from '@/api/order'
import { goodsGet_skus } from '@/api/goods';

import { useDictOptions } from '@/hooks/useDictOptions'
import useMultipleTabs from '@/hooks/useMultipleTabs'
import dayjs  from 'dayjs'
import config from '@/config'
import useAppStore from '@/stores/modules/app'
import useUserStore from '@/stores/modules/user'
import feedback from '@/utils/feedback'
import { timeFormat } from '@/utils/util'
// import RelationsAdd from '../components/relations-add.vue'
const userStore = useUserStore()
const appStore = useAppStore()

const dateComputed = computed(()=>(timestamp:any)=>{
    if(timestamp == 0){
        return "";
    }
    timestamp = timestamp * 1000;
    console.log(timestamp);
	return dayjs(timestamp).format('YYYY-MM-DD');
})
const route = useRoute()
const router = useRouter()
const columnArr = reactive([
    {
        column_name: 'shop_title',
        name: '店名',
        type: 'input'
    },
    {
        column_name: 'shop_name',
        name: '店员',
        type: 'input'
    },
    {
        column_name: 'material',
        name: '主材',
        type: 'input'
    },
    {
        column_name: 'task',
        name: '任务',
        type: 'input'
    },
    {
        column_name: 'foreman',
        name: '工长',
        type: 'input'
    },
    {
        column_name: 'quality',
        name: '材质',
        type: 'input'
    },
    {
        column_name: 'group_square',
        name: '平米或组数',
        type: 'input'
    },
    {
        column_name: 'is_all_pipe',
        name: '是否全屋换管',
        type: 'input'
    },
    {
        column_name: 'heating_method',
        name: '供暖方式',
        type: 'input'
    },
    {
        column_name: 'pipe_type',
        name: '管材类型',
        type: 'input'
    },
    {
        column_name: 'old_heating',
        name: '原暖气',
        type: 'input'
    },
    {
        column_name: 'new_heating',
        name: '新暖气',
        type: 'input'
    },
    {
        column_name: 'manage_name',
        name: '管家姓名',
        type: 'input'
    },
    {
        column_name: 'manage_mobile',
        name: '管家电话',
        type: 'input'
    },
    {
        column_name: 'customer_name',
        name: '客户姓名',
        type: 'input'
    },
    {
        column_name: 'customer_mobile',
        name: '客户电话',
        type: 'input'
    },
    {
        column_name: 'customer_address',
        name: '客户地址',
        type: 'input'
    },
    {
        column_name: 'contract_no',
        name: '合同编号',
        type: 'input'
    },
    {
        column_name: 'remark',
        name: '备注',
        type: 'input'
    }
])

const limits = reactive([
    {
        column_name: 'is_measure',
        name: '是否测量',
        type: 'checkbox',
        limit: 'order.measurement',
    },
    {
        column_name: 'is_disclose',
        name: '是否交底',
        type: 'checkbox',
        limit: 'order.disclose',
    },
    {
        column_name: 'is_pay',
        name: '是否支付',
        type: 'checkbox',
        limit: 'order.orderPay',
    },
    {
        column_name: 'is_change',
        name: '是否改管',
        type: 'checkbox',
        limit: 'order.changeManagement',
    },
    {
        column_name: 'is_order',
        name: '是否下单',
        type: 'checkbox',
        limit: 'order.downOrder',
    },
    {
        column_name: 'is_send',
        name: '是否发货',
        type: 'checkbox',
        limit: 'order.consignment',
    },
    {
        column_name: 'is_install',
        name: '是否安装',
        type: 'checkbox',
        limit: 'order.install',
    },
    {
        column_name: 'is_receive',
        name: '是否收货',
        type: 'checkbox',
        limit: 'order.receiving',
    },
    {
        column_name: 'is_success',
        name: '是否成单',
        type: 'checkbox',
        limit: 'order.successOrder',
    }
])

// 测量
const measureCoForm = reactive({
    list: [
        {
            measure_time: '',
            measure_name: '',
            measure_mobile: '',
            measure_photos: []
        }
    ]
})
// 改管
const  changeCoForm = reactive({
    list: [
        {
            change_time: '',
            change_name: '',
            change_mobile: '',
            change_photos: []
        }
    ]
})
// 下单
const orderCoForm = reactive({
    list: [
        {
            order_time: '',
            order_name: '',
            order_mobile: '',
            order_photos: []
        }
    ]
})
// 安装
const installCoForm = reactive({
    list: [
        {
            install_time: '',
            install_name: '',
            install_mobile: '',
            install_photos: []
        }
    ]
})

const payCo = reactive([
    {
        column_name: 'pay_time',
        name: '支付时间',
        type: 'date'
    },
    {
        column_name: 'pay_money',
        name: '支付金额',
        type: 'input'
    },
    {
        column_name: 'pay_photos',
        name: '支付图片',
        type: 'upload'
    }
])

// 交底
const discloseCo = reactive([
    {
        column_name: 'disclose_time',
        name: '交底日期',
        type: 'date'
    },
    {
        column_name: 'disclose_name',
        name: '交底师傅',
        type: 'input'
    },
    {
        column_name: 'disclose_mobile',
        name: '师傅电话',
        type: 'input'
    },
    {
        column_name: 'disclose_photos',
        name: '交底图片',
        type: 'upload'
    }
])


// 送货
const sendCo = reactive([
    {
        column_name: 'send_time',
        name: '送货时间',
        type: 'date'
    }
])
// 收货
const receiveCo = reactive([
    {
        column_name: 'receive_time',
        name: '收货时间',
        type: 'date'
    }
])
const formData = reactive<{
    [key: string]: any
}>({
    shop_title: '',
    shop_name: '',
    material: '',
    customer_name: '',
    customer_mobile: '',
    customer_address: '',
    contract_no: '',
    // measure_time: '',
    // measure_name: '',
    // measure_photos: [],
    is_measure: 0,
    pay_time: '',
    pay_money: 0,
    pay_photos: [],
    is_pay: 0,
    // change_time: '',
    // change_name: '',
    // change_photos: [],
    is_change: 0,
    is_send: 0,
    send_time: '',
    receive_time: '',
    is_receive: 0,
    // install_time: '',
    // install_name: '',
    // install_photos: [],
    is_install: 0,
    remark: '',
    status: 0,
    skus: [],
    info_photos: [],
    is_disclose: 0,
    disclose_time: '',
    disclose_name: '',
    disclose_photos: [],
    is_order: 0,
    // order_time: '',
    // order_name: '',
    // order_photos: [],
    task: '',
    foreman: '',
    quality: '',
    is_all_pipe: '',
    heating_method: '',
    pipe_type: '',
    old_heating: '',
    new_heating: '',
    manage_name: '',
    manage_mobile: '',
    group_square: '',

    install_json: [],
    measure_json: [],
    order_json: [],
    change_json: [],
    is_success: 0
});




// 声明表单 formRef
// 用来存储 SKU 表单 refs 的 Map
// Key 可以是 index 或 item.id (如果 item.id 唯一且稳定的话)
const skuFormRefs = ref(new Map()); 
// 设置 SKU 表单 ref 的函数
const setSkuFormRef = (index, el) => {
    if (el) {
        // 存储 el-form 组件实例
        skuFormRefs.value.set(index, el);
    } else {
        // 如果元素被移除，从 Map 中删除对应的 ref
        skuFormRefs.value.delete(index);
    }
};
// 可选：在更新前清空 refs，确保准确性（特别是当列表结构变化频繁时）
onBeforeUpdate(() => {
  skuFormRefs.value.clear();
});


const getDetail = async () => {
    // const data = await orderDetail({
    //     id: route.query.id
    // });
    // // Object.keys(formData).forEach((key) => {
    // //     //@ts-ignore
    // //     formData[key] = data[key]
    // // })

    // for (const key in formData) {
    //     if (data[key] != null && data[key] != undefined) {
    //         //@ts-ignore
    //         formData[key] = data[key]
    //     }
    //     if(key == 'install_photos' || key == 'measure_photos' || key == 'pay_photos' || key == 'change_photos' || key == 'info_photos' || key == 'disclose_photos' || key == 'order_photos'){
    //         if(data[key] != '' && data[key] != null && data[key] != undefined){
    //             formData[key] = data[key].split(',')
    //         }else{
    //             formData[key] = []
    //         }
    //     }
    // }

    if (route.query.id) {
        const data = await orderDetail({ id: route.query.id });
        Object.assign(formData, data);
        for (const key in formData) {
            if(key != 'pay_photos' && key != 'info_photos' && key != 'disclose_photos' && key != 'pay_time' && key != 'disclose_time' && key != 'receive_time' && key != 'send_time' && key != 'install_json' && key != 'measure_json' && key != 'order_json' && key != 'change_json'){
                if (data[key] != null && data[key] != undefined) {
                    //@ts-ignore
                    formData[key] = data[key]
                }
            }

            if(key == 'pay_photos' || key == 'info_photos' || key == 'disclose_photos'){
                if(data[key] != '' && data[key] != null && data[key] != undefined){
                    formData[key] = data[key].split(',')
                }else{
                    formData[key] = []
                }
            }
            if(key == 'pay_time' || key == 'disclose_time' || key == 'receive_time' || key == 'send_time'){
                if(data[key] != '' && data[key] != null && data[key] != undefined){
                    formData[key] = data[key]
                }else{
                    formData[key] = ''
                }
            }
            // if(key == 'install_json' || key == 'measure_json' || key == 'order_json' || key == 'change_json'){
            //     if(data[key] != '' && data[key] != null && data[key] != undefined){
            //         formData[key] = data[key]
            //     }
            // }

            if(key == 'install_json' || key == 'measure_json' || key == 'order_json' || key == 'change_json'){
                if(data[key] != '' && data[key] != null && data[key] != undefined){
                    let list = data[key].length > 0 ? JSON.parse(JSON.stringify(data[key])) : []
                    list.forEach((itemObj: any) => {
                        console.log('itemObj',itemObj,key)
                        for(const keys in itemObj){
                            if(keys == 'measure_photos' || keys == 'install_photos' || keys == 'order_photos' || keys == 'change_photos'){
                                if(itemObj[keys] == '' || itemObj[keys] == null || itemObj[keys] == undefined){
                                    console.log('itemObj[keys]',keys, itemObj[keys])
                                    itemObj[keys] = []
                                }else{
                                    itemObj[keys] = itemObj[keys].split(',')
                                }
                            }

                            if(keys == 'measure_time' || keys == 'install_time' || keys == 'order_time' || keys == 'change_time'){
                                if(itemObj[keys] != '' && itemObj[keys] != null && itemObj[keys] != undefined){
                                    console.log('itemObj[keys]',keys, itemObj[keys])
                                    itemObj[keys] = Number(itemObj[keys])
                                }else{
                                    itemObj[keys] = 0
                                }
                            }
                        }
                    })
                    formData[key] = list

                    if(key == 'measure_json'){
                        measureCoForm.list = list
                    }
                    if(key == 'change_json'){
                        changeCoForm.list = list
                    }
                    if(key == 'order_json'){
                        orderCoForm.list = list
                    }
                    if(key == 'install_json'){
                        installCoForm.list = list
                    }
                }
            }

        }
        console.log(toRaw(formData))
    }
}

const skusData = ref([])
const getGoodsGet_skus = async () => {
    const data  = await goodsGet_skus()
    skusData.value = data
    console.log(data)
}
onActivated(() => {
    getDetail()
    getGoodsGet_skus()
})



const getSummaries = (param: any) => {
    const { columns, data } = param;
    const sums: any = []; // 最终返回的数组

    columns.forEach((column: any, index: number) => {
        // 条件1: 判断是否是第一列
        if (index === 0) {
        sums[index] = '总计';
            return;
        }

        // 条件2: 判断列的 property 是否是需要计算的列
        if (column.property === 'cost_price' || column.property === 'sale_price' || column.property === 'total_price') {
            let values = data.map((item: any) => Number(item[column.property]));
            if(column.property === 'total_price'){
                values = data.map((item: any) => Number(item.sale_price * item.total_number));
            }
            if (!values.every((value: any) => isNaN(value))) {
                const sum = values.reduce((prev: any, curr: any) => {
                    const value = Number(curr);
                    return isNaN(value) ? prev : prev + curr;
                }, 0);
                // 你还可以在这里添加单位
                sums[index] = sum;
            } else {
                sums[index] = '';
            }
        } else {
            // 其他不需要计算的列，可以留空或显示 '-'
            sums[index] = '';
        }
    });

    return sums;
}
</script>
